<template>
  <!-- @command当下拉项被点击时触发，参数是从下拉菜单中发送的命令 -->
  <el-dropdown
      trigger="click"
      class="international"
      @command="handleSetLanguage"
  >
    <div>
      <!-- 通过设置 effect 来修改主题，默认值为 dark. -->
      <el-tooltip
        :content="$t('msg.navBar.lang')"
        :effect="effect"
      >
        <svg-icon id="guide-lang" icon="language" />
      </el-tooltip>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
            :disabled="language === 'zh'"
            command="zh"
        >
          中文
        </el-dropdown-item>
        <el-dropdown-item
            :disabled="language === 'en'"
            command="en"
        >
          English
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { computed } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

defineProps({
  effect: {
    type: String,
    default: "dark",
    validator: function (value) {
      // 这个值必须匹配下列字符串中的一个
      return ["dark", "light"].indexOf(value) !== -1;
    }
  }
});

const store = useStore();
const language = computed(() => store.getters.language);

// 切换语言的方法
const i18n = useI18n();
const handleSetLanguage = (lang) => {
  i18n.locale.value = lang;
  store.commit("app/setLanguage", lang);
  ElMessage.success("更新成功");
};
</script>